<!doctype html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>canvas画布的高斯模糊效果</title>
  <script src="./glfx.js"></script>
</head>
<body>
<canvas id="canvas"></canvas>
<canvas id="canvasT"></canvas>
<!--<img  id="img" src="https://shejimiao-biku.oss-cn-qingdao.aliyuncs.com/web/1.jpg"/>-->
<img  id="img" src="./timg.jpeg"/>
</body>
<script >
  console.log(fx, 'fx==================')
  var canvas = fx.canvas()
  const start = new Date().valueOf()
  // var image = document.getElementById('img');
  const image = new Image()
  image.src = 'https://shejimiao-biku.oss-cn-qingdao.aliyuncs.com/web/1.jpg'
  image.crossOrigin = ''
  image.onload = () => {
    var texture = canvas.texture(image);
    canvas.draw(texture).triangleBlur(78).update()
    // console.log(canvas.toDataURL('image/png'))
    canvas.toBlob((blob) => {
      const url = (window.URL) ? window.URL.createObjectURL(blob) : window.webkitURL.createObjectURL(blob)
      console.log(url, new Date().valueOf() - start)
    })
  }

</script>
<!--<script>
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  var canvasT = document.getElementById('canvasT');
  var ctxT = canvasT.getContext('2d');
  let img = new Image();
  //这里直接修改图片的路径
  img.src = "./timg.jpeg";
  // img.crossOrigin=''
  // img.src = 'https://shejimiao-biku.oss-cn-qingdao.aliyuncs.com/web/1.jpg?1'
  img.onload = function () {
    //设置canvas的宽高
    canvasT.height = img.height
    canvasT.width = img.width
    canvas.height = img.height;
    canvas.width = img.width;
    //将图像绘制到canvas上面
    ctx.drawImage(img, 0, 0, img.width, img.height);
    ctxT.drawImage(img, 0, 0, img.width, img.height);
    //从画布获取一半图像
    var data = ctx.getImageData(0, 0, img.width/2, img.height);
    var dataT = ctx.getImageData(0, 0, img.width/2, img.height);
    //将图像数据进行高斯模糊 data.data是一个数组，每四个值代表一个像素点的rgba的值，data.width data.height 分别代表图像数据的宽高
    var emptyData = gaussBlur(data);
    var emptyDataT = gaussBlur(dataT, 30);
    //将模糊的图像数据再渲染到画布上面
    ctx.putImageData(emptyData, 0, 0);
    ctxT.putImageData(emptyDataT, 0, 0);
  };

  function gaussBlur(imgData, radius = 15) {
    var pixes = imgData.data;
    var width = imgData.width;
    var height = imgData.height;
    var gaussMatrix = [],
      gaussSum = 0,
      x, y,
      r, g, b, a,
      i, j, k, len;
    var sigma = Math.floor(radius / 3)
    a = 1 / (Math.sqrt(2 * Math.PI) * sigma);
    b = -1 / (2 * sigma * sigma);
    //生成高斯矩阵
    for (i = 0, x = -radius; x <= radius; x++, i++) {
      g = a * Math.exp(b * x * x);
      gaussMatrix[i] = g;
      gaussSum += g;

    }

    //归一化, 保证高斯矩阵的值在[0,1]之间
    for (i = 0, len = gaussMatrix.length; i < len; i++) {
      gaussMatrix[i] /= gaussSum;
    }
    //x 方向一维高斯运算
    for (y = 0; y < height; y++) {
      for (x = 0; x < width; x++) {
        r = g = b = a = 0;
        gaussSum = 0;
        for (j = -radius; j <= radius; j++) {
          k = x + j;
          if (k >= 0 && k < width) {//确保 k 没超出 x 的范围
            //r,g,b,a 四个一组
            i = (y * width + k) * 4;
            r += pixes[i] * gaussMatrix[j + radius];
            g += pixes[i + 1] * gaussMatrix[j + radius];
            b += pixes[i + 2] * gaussMatrix[j + radius];
            a += pixes[i + 3] * gaussMatrix[j];
            gaussSum += gaussMatrix[j + radius];
          }
        }
        i = (y * width + x) * 4;
        // 除以 gaussSum 是为了消除处于边缘的像素, 高斯运算不足的问题
        // console.log(gaussSum)
        pixes[i] = r / gaussSum;
        pixes[i + 1] = g / gaussSum;
        pixes[i + 2] = b / gaussSum;
        // pixes[i + 3] = a ;
      }
    }
    //y 方向一维高斯运算
    for (x = 0; x < width; x++) {
      for (y = 0; y < height; y++) {
        r = g = b = a = 0;
        gaussSum = 0;
        for (j = -radius; j <= radius; j++) {
          k = y + j;
          if (k >= 0 && k < height) {//确保 k 没超出 y 的范围
            i = (k * width + x) * 4;
            r += pixes[i] * gaussMatrix[j + radius];
            g += pixes[i + 1] * gaussMatrix[j + radius];
            b += pixes[i + 2] * gaussMatrix[j + radius];
            // a += pixes[i + 3] * gaussMatrix[j];
            gaussSum += gaussMatrix[j + radius];
          }
        }
        i = (y * width + x) * 4;
        pixes[i] = r / gaussSum;
        pixes[i + 1] = g / gaussSum;
        pixes[i + 2] = b / gaussSum;
      }
    }
    return imgData;
  }
</script>-->
</html>
